    <%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8" %>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <c:set var="ctx" value="${pageContext.request.contextPath}" scope="application"/>
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>菜单管理</title>
        </head>
        <body>
        <button class="layui-btn bt_add">添加顶级目录</button>
        <input type="hidden" id="refresh">
        <table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>

        <script type="text/javascript">
        layui.config({
        base: '${ctx}/static/js/',
        })
        layui.use(['treeTable','layer','code','form'],function(){
        var o = layui.$,
        $ = layui.$,
        form = layui.form,
        layer = layui.layer,
        treeTable = layui.treeTable;
        // 直接下载后url: './data/table-tree.json',这个配置可能看不到数据，改为data:[],获取自己的实际链接返回json数组
        var re = treeTable.render({
        elem: '#tree-table',
        url : '${ctx}/menu/page',
        icon_key: 'menuname',
        end: function(e){
        form.render();
        },
        cols: [
        {
        key: 'menuname',
        title: '菜单名称',
        },
        {
        key: 'id',
        title: '菜单ID',
        align: 'center',
        },
        {
        key: 'pid',
        title: '父菜单ID',
        align: 'center',
        },
        {
        key: 'menutype',
        title: '菜单类型',
        align: 'center',
        },{
        key: 'permission',
        title : '权限标识符'
        },{
        key: 'icon',
        title: '菜单图标',
        align: 'center',
        },
        {
        key: 'url',
        title: '跳转地址',
        align: 'center',
        },
        {
        key: 'method',
        title: '回调方法',
        align: 'center',
        },
        {
        key: 'seq',
        title: '序号',
        align: 'center',
        },
        {
        title: '操作',
        align: 'center',
        template: function(item){
        return '<button class="layui-btn" lay-filter="add">添加</button>'+
        '<button class="layui-btn layui-btn-warm bt_update" lay-filter="update">修改</button>'+
        '<button class="layui-btn layui-btn-danger bt_delete" lay-filter="delete">删除</button>';
        }
        }
        ]
        });

        //添加顶级目录
        $('.bt_add').click(function(){
        layer.open({
        type: 2,
        title: '添加',
        shadeClose: true,
        shade: false,
        maxmin: true, //开启最大化最小化按钮
        area: ['893px', '600px'],
        content: '${ctx}/menu/menu_addParentPage'
        });
        })

        //添加
        treeTable.on('tree(add)',function(data){
        console.log(data);
        console.log(data.item.id);
        //layer.msg(JSON.stringify(data));
        layer.open({
        type: 2,
        title: '添加',
        shadeClose: true,
        shade: false,
        maxmin: true, //开启最大化最小化按钮
        area: ['893px', '600px'],
        content: '${ctx}/menu/menu_addPage?pid='+data.item.id
        });
        })

        //修改
        treeTable.on('tree(update)',function(data){
        var data = $.param(data.item);
        layer.open({
        type: 2,
        title: '修改',
        shadeClose: true,
        shade: false,
        maxmin: true, //开启最大化最小化按钮
        area: ['893px', '600px'],
        content: '${ctx}/menu/menu_updatePage?'+data
        });
        })


        //删除
        treeTable.on('tree(delete)',function(data){
        var id = data.item.id;
        $.ajax({
        type: "POST",
        url: '${ctx}/menu/delete',
        contentType : "application/json",
        dataType: 'json',
        data: JSON.stringify(id),
        success: function(e){
        if (e == "") {
        layer.msg('删除成功', {icon: 1}); //高用父窗口中的layer来提示，这样关闭弹出窗后提示不会立马关闭
        treeTable.render(re);
        } else {
        layer.msg(e, {icon: 2});
        }
        },
        error: function(res){
        layer.msg("未知异常", {icon: 2});
        }
        });
        })

        //刷新
        $('#refresh').click(function (){
        treeTable.render(re);
        treeTable.openAll(re);
        })

        //展开全部
        treeTable.openAll(re);
        })
        </script>
        </body>
        </html>